<!--
 * @Author: Bennent_G
 * @Date: 2024-12-26 09:38:53
 * @LastEditTime: 2025-03-25 15:23:22
 * @Description:
-->

<template>
	<div>
		<el-dialog v-model="locaVisible" v-bind="$attrs" width="600px">
			<template #footer>
				<el-button @click="close">取消</el-button>
				<el-button type="primary" :loading="loading" @click="handleSubmit">确定</el-button>
			</template>
			<el-form ref="formRef" :model="form">
				<el-form-item label="角色名称" prop="nickName" :rules="[{ required: true, message: '请输入昵称!' }]">
					<el-input v-model="form.nickName" placeholder="请输入昵称"></el-input>
				</el-form-item>
				<el-form-item label="角色状态" prop="status" :rules="[{ required: true, message: '' }]">
					<el-radio-group v-model="form.status">
						<el-radio :label="1">启用</el-radio>
						<el-radio :label="0">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="角色描述" prop="desc" :rules="[{ required: true, message: '请输入!' }]">
					<el-input v-model="form.desc" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="角色备注" prop="remark" :rules="[{ required: true, message: '请输入!' }]">
					<el-input type="textarea" v-model="form.remark" placeholder="请输入"></el-input>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { computed, defineComponent, ref, reactive, watchEffect } from 'vue';
import type { AnyObject } from "@/views/global";
import useNotificationHook from '@/hooks/common/useNotificationHook';

defineComponent({ name: 'RoleFormModal' });
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	id: {
		type: [Number, String],
		default: 0
	}
});
const emits = defineEmits(['update:modelValue']);
const locaVisible = computed({
	get: () => props.modelValue,
	set: (val) => emits('update:modelValue', val)
});

const { openNotifation } = useNotificationHook();

// 表单
const formRef = ref();
const loading = ref<boolean>(false);
const form = reactive<AnyObject>({
	nickName: '',
	desc: '',
	status: 1,
	remark: '',
});
const handleSubmit = () => {
	loading.value = true;
	formRef.value.validate((valid) => {
		if (valid) {
			console.log('submit!');
			// #TODO: 提交表单
			openNotifation({ type:'success', message: '提交成功' });
		}
		loading.value = false;
		reset();
	});
};
const reset = () => {
	formRef.value.resetFields();
	locaVisible.value = false;
};

// 获取角色信息
const getRoleInfo = () => {
	// #TODO: 获取用户信息
	// #TODO: 获取用户信息成功后同步表单
	if (!props.id) return;
	console.log('getUserInfo', props.id);
};
watchEffect(() => {
	getRoleInfo();
});

// 关闭弹框
const close = () => {
	locaVisible.value = false;
	reset();
};

</script>

<style scoped lang="scss">
.el-input-number {
	width: 100%;
}
</style>
